<template>
  <div id="main" class="parameterInfor flowCloumn h100">
    <div class="constentBttom flowWrap tab-switch h100">
    <div class="treeDiv class-tree">
      <edit-tree-new
        ref="tree"
        :treeSetting="treeSetting"
        :hideBtn="hideBtn"
        @handleClickTree="handleClickTree"
        @addRootNode="addRootNode"
        @addChildNode="addChildNode"
        @editNode="editNode"
        @deleteNode="deleteNode"
        :filterNode="filterNode"
      />
    </div>
    <div class="draggingBtn">
        <widthResize></widthResize>
      </div>
    <div class="constentmain tableDiv table-list">
      <table-list ref="tableList" :queryId="orgCode" />
    </div>
    </div>
    <dialogPublic
      :title="title"
      :show.sync="show"
      v-if="show"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
    >
      <editForm
        :formConfig="formConfig"
        ref="editForm"
        :formData="editFormData"
      ></editForm>
    </dialogPublic>
  </div>
</template>

<script>
import tableList from "./tableList.vue";
import {
  orgTreeData,
  orgTreeAdd,
  orgTreeEdit,
  orgTreeDelete,
  getOrgLevel,
  syncStaffOrg
} from "@/api/systemManagement/orgnizationManagement.js";
import { applicationQueryList } from "@/api/systemManagement/applicationManagement.js";
export default {
  components: {
    tableList,
  },
  data() {
    return {
      title: "",
      show: false,
      orgCode: null,
      treeSetting: {
        btnArr: ["sync", "add"],
        btnCallback: async (type) => {
          console.log('trigger', type);
          if(type === 'sync') {
            if(!this.orgCode.parentid) this.orgCode.parentid = '0'
            const { code } = await syncStaffOrg({code: this.orgCode.id, parentCode: this.orgCode.parentid, appId: this.orgCode.appid, name: this.orgCode.name})
            if(code === 200) {
              this.$message.success('同步成功')
              this.show = false;
              this.getTreeData();
            } else {
              this.$message.error('同步失败')
            }
          }
        },
        title: "设备资产管理系统",
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
      },
      formConfig: {
        labelWidth: "100px",
        itemArr: [
          {
            label: "父级组织",
            prop: "parentName",
            type: "text",
            disabled: true,
            span: 12,
          },
          {
            label: "组织名称",
            prop: "name",
            type: "text",
            span: 12,
            required: true,
          },
          {
            label: "所属应用",
            prop: "appid",
            type: "select",
            span: 12,
            required: true,
            disabled: true,
          },
          {
            label: "组织层级",
            prop: "level",
            type: "select",
            span: 12,
            required: true,
            selectOption: this.$store.getters.dirtData("system_org_level"),
            disabledOp: (value, option) => {
              return !this.allowSelectLevel.includes(value);
            },
          },
          {
            label: "组织类型",
            prop: "type",
            type: "select",
            span: 12,
            required: true,
            selectOption: this.$store.getters.dirtData("system_org_type"),
          },
          {
            label: "编码前缀",
            prop: "prefix",
            type: "text",
            span: 12,
            required: true,
          },
          {
            label: "是否外单位",
            prop: "outOrg",
            type: "select",
            span: 12,
            required: true,
            disabled: true,
            selectOption: this.$store.getters.dirtData("system_orgout"),
          },
          {
            label: "排序",
            prop: "sort",
            type: "number",
            span: 12,
            required: true,
          },
        ],
      },
      editFormData: {},
      hideBtn: false,
      allowSelectLevel: [],
    };
  },
  created() {
    this.getTreeData();
    this.getSelectData();
  },
  methods: {
    //筛选树
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //点击树节点
    handleClickTree(node) {
      this.orgCode = node;
    },
    //添加根节点
    addRootNode() {
      this.title = "添加根节点";
      this.editFormData = {
        name: "",
        parentName: "",
        parent: 0,
      };
      this.formConfig.itemArr[2].disabled = false;
      this.formConfig.itemArr[6].disabled = false;
      this.allowSelectLevel = ["1"];
      this.show = true;
    },
    //添加子节点
    addChildNode(data) {
      this.title = "添加节点";
      this.editFormData = {
        name: "",
        parentName: data.name,
        parent: data.id,
        appid: data.appid,
        outOrg: data.outOrg,
      };
      this.formConfig.itemArr[2].disabled = true;
      if (data.outOrg == "1") {
        this.formConfig.itemArr[6].disabled = true;
      } else {
        this.formConfig.itemArr[6].disabled = false;
      }
      switch (data.level) {
        case "1":
          this.allowSelectLevel = ["1", "2", "3"];
          break;
        case "2":
          this.allowSelectLevel = ["2", "3"];
          break;
        default:
          this.allowSelectLevel = ["3"];
          break;
      }
      this.show = true;
    },
    //编辑节点赋值
    editNode(node, data) {
      this.getLevelOption(data.id);
      this.editFormData = data;
      this.title = "编辑节点";
      this.editFormData.parentName = node.parent.data.name;
      this.editFormData.parent = this.editFormData.parentid;
      this.editFormData.sort = data.order;
      let result = node.childNodes.every((item) => {
        return item.data.outOrg == "1";
      });
      if (this.editFormData.parent == "0") {
        this.formConfig.itemArr[2].disabled = false;
      } else {
        this.formConfig.itemArr[2].disabled = true;
      }
      if (node.parent.data.outOrg == "1" || !result) {
        this.formConfig.itemArr[6].disabled = true;
      } else {
        this.formConfig.itemArr[6].disabled = false;
      }
      this.show = true;
    },
    //删除节点
    deleteNode(id) {
      let param = {
        id: id,
      };
      orgTreeDelete(param)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success(res.description);
            this.getTreeData();
          }
        })
        .catch((res) => {
          this.$message.error(res.description);
        });
    },
    //提交弹框数据
    async doSubmit() {
      try {
        let params = await this.$refs.editForm.getFormData();
        if (this.title == "编辑节点") {
          let res = await orgTreeEdit(params);
          if (res.code == 200) {
            this.getTreeData();
            this.$message.success(res.description);
            this.show = false;
          }
        }
        if (this.title == "添加节点" || this.title == "添加根节点") {
          let res = await orgTreeAdd(params);
          if (res.code == 200) {
            this.getTreeData();
            this.$message.success(res.description);
            this.show = false;
          }
        }
      } catch (error) {
        this.$message.error(res.description);
      }
    },
    //获取应用下拉框数据
    getSelectData() {
      applicationQueryList().then(
        (res) => {
          let arr = res.data.map((item) => {
            const obj = {
              label: item.name,
              value: item.id,
            };
            return obj;
          });
          this.$set(this.formConfig.itemArr[2], "selectOption", arr);
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //获取可用下拉层级
    getLevelOption(id) {
      getOrgLevel({ orgId: id }).then((res) => {
        this.allowSelectLevel = res.data;
      });
    },
    //获取组织树数据
    getTreeData() {
      //得到组织树的数据
      orgTreeData({PermissionAllapp: true}).then(
        (res) => {
          if (res.code == 200 && res.data.length > 0) {
            this.orgCode = this.orgCode ? this.orgCode : res.data[0];
            this.$set(this.treeSetting, "data", res.data);
            this.$refs.tree.setCurrentKey(this.orgCode);
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  height: 100%;
  background-color: white;
  //display: flex;
  .class-tree {
    height: 100%;
    width: 360px;
    border-right: 10px solid #f2f3f8;
  }
  .table-list {
    height: 100%;
    width: calc(100% - 300px);
    padding: 20px;
    //border-left: 15px solid #f2f3f8;
    flex: 1;
    overflow: auto;
  }
}
.parameterInfor {
  .constentmain {
    margin-left: 15px;
  }
  /deep/.el-tabs__content {
    height: calc(100% - 50px);
  }
  /deep/.el-tab-pane {
    height: 100%;
  }
}
.flowCloumn {
  display: flex;
  flex-flow: column nowrap;
}
.flowWrap {
  display: flex;
  flex-flow: wrap nowrap;
}
.el-tabs--border-card {
  box-shadow: none;
}
</style>
